<template>
    <div class="components-setting">
      <SettingWrap :list="list" placement="left" :name="selectedComponent.text || selectedComponent.label" >
        <template v-slot:default="{activeName}">
          <Geometry v-if="activeName === 'geometry'" />
          <Style v-else-if="activeName === 'style'" />
          <Data v-else-if="activeName === 'data'" />
          <Linkage v-else-if="activeName === 'linkage'" />
          <Jump v-else-if="activeName === 'jump'" />
          <!-- <Event v-else /> -->
        </template>
      </SettingWrap>



    </div>
</template>

<script >
import { mapState } from "vuex"
import Style from "./Style"
import Event from "./Event"
import Geometry from "./Geometry"
import Data from "./Data"
import Linkage from "./Linkage"
import Jump from "./Jump/index.jsx"
import SettingWrap from "../../../common/SettingWrap"


export default {
  data() {
    return {

    }
  },
  computed: {
    ...mapState("lowCode", {
      selectedComponent: state => state.selectedComponent
    }),
    list(){
      const getTitleCase = (string) => string[0].toUpperCase() + string.substr(1)
      const common =  [
        {
          icon: "column-width",
          title: "几何属性",
          id: "geometry"
        },
        {
          icon: "bg-colors",
          title: "样式效果",
          id: "style"
        },
        // {
        //   icon: "alert",
        //   title: "事件响应",
        //   id: "event"
        // },
        {
          icon: "block",
          title: "联动设置",
          id: "linkage"
        },
        {
          icon: "arrow-right",
          title: "跳转设置",
          id: "jump"
        },
        {
          icon: "global",
          title: "数据绑定",
          id: "data"
        }
      ]
      return common.map(item => ({
          ...item,
          isShow: this.selectedComponent[`is${getTitleCase(item.id)}`]
        }))
    }
  },
  methods: {

  },
  components: {
    Style,
    Event,
    Geometry,
    Data,
    Linkage,
    Jump,
    SettingWrap
  }
}
</script>

<style lang="less" scoped>
  @import url("./index.less");
</style>
